﻿<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>全塑智联MES-生产效率看板</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <link rel="stylesheet" href="css/comon0.css">
</head>

<body>
<div class="loading">
    <div class="loadbox"><img src="images/loading.gif" alt=""> 页面加载中...</div>
</div>
<div class="head">
    <div style="display:inline;">
        <h1>生产效率看板</h1>
    </div>
    <div id="orderCode" style="display:inline; float:left;font-size: .2rem; width: 25%; margin-left:.8rem;">
    </div>

    <div id="showTime" style="display:inline; float:right;font-size: .2rem;  margin-right: 1.5rem ;"></div>
</div>
<div class="mainbox">
    <div style="display: flex; justify-content: space-evenly;">
        <div style="width: 20%;" class="boxall">
            <div class="tit03">当日产量</div>
            <div class="tit03">
                <div class="boxnav">
                    <p id="todayProductionQuantity">
                        <span>1</span>
                        <span>2</span>
                        <span>3</span>
                        <span>4</span>
                        <span>5</span>
                        <span>6</span>
                        <span>7</span>
                    </p>
                </div>
            </div>
        </div>
        <div style="width: 20%;" class="boxall">
            <div class="tit03">当月产量</div>
            <div class="tit03">
                <div class="boxnav">
                    <p id="tomonthProductionQuantity">
                        <span>1</span>
                        <span>2</span>
                        <span>3</span>
                        <span>4</span>
                        <span>5</span>
                        <span>6</span>
                        <span>7</span>
                    </p>
                </div>
            </div>
        </div>
        <div style="width: 20%;" class="boxall">
            <div class="tit03">工单完成率</div>
            <div id="workOrderFinishedRate" class="tit03" style="margin-top: .1rem; font-size: .7rem">
                80%
            </div>
        </div>
        <div style="width: 20%;" class="boxall">
            <div class="tit03">未报工数</div>
            <div class="tit03">
                <div class="boxnav">
                    <p id="unFinishQuantity">
                        <span>1</span>
                        <span>2</span>
                        <span>3</span>
                        <span>4</span>
                        <span>5</span>
                        <span>6</span>
                        <span>7</span>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <ul class="clearfix">

        <li>
            <div class="boxall" style="width: 19.5rem; height:6.5rem; overflow:hidden; padding: 0;">
                <!-- <div class="tit04">订单完成情况</div> -->
                <div class="listhead listhead2">
                    <span>任务编号</span>
                    <span>订单编号</span>
                    <span>产品名称</span>
                    <span>计划数</span>
                    <span>下达数</span>
                    <span>当前工序</span>
                    <span>下一道工序</span>
                    <span>计划开工时间</span>
                    <span>计划完工时间</span>
                    <span>实际开工时间</span>
                    <span>实际完工时间</span>
                    <span>合格数</span>
                    <span>报废数</span>
                    <span>完成率</span>
                </div>
                <div id="outDiv1" style="width: 19.5rem; height:calc(100% - .35rem);">

                    <div id="outDiv2" class="boxnav nav04">
                        <div id="data_tbody" class="listnav listnav2">
                            <ul class="smjl" id="productList">
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="boxfoot"></div>
            </div>

        </li>

    </ul>
</div>


<!--<script type="text/javascript" src="js/echarts.min.js"></script>-->
<script src="js/jquery.liMarquee.js"></script>
<script language="JavaScript" src="js/js.js"></script>
<script type="text/javascript" src="js/jquery.countup.min.js"></script>
<script type="text/javascript" src="js/jquery.waypoints.min.js"></script>
<script type="text/javascript">

    /*
        _S1,_S2是滚动内容区域外的两个DIV的ID
        如
        <div id="_S1">
        <div id="_S2">
        _W为滚动内容的宽度
        _H为滚动内容的高度
        _T为滚动后每次停留言时间
        */
    const isScroll = true;

    function _InitScroll(_S1, _S2, _W, _H, _T) {
        if (!isScroll) {
            return false;
        }
        marqueesHeight = _H;
        stopScroll = false;
        scrollElem = document.getElementById(_S1);
        scrollTable = document.getElementById('data_tbody');
        if (scrollTable.offsetHeight < marqueesHeight) {
            return;
        }
        with (scrollElem) {
            style.width = _W;
            style.height = marqueesHeight;
            style.overflow = 'hidden';
            noWrap = true;
        }
        pauseTime = _T;
        setTimeout('init_srolltext()', 1000);
        init_srolltext();
    }

    function init_srolltext() {
        scrollElem.scrollTop = 0;
        scrollIntervalId = setInterval('scrollUp()', 75);
    }

    function scrollUp() {
        if (stopScroll) {
            return;
        }
        let preTop = scrollElem.scrollTop;
        scrollElem.scrollTop += 1;
        if (preTop == scrollElem.scrollTop) {
            scrollElem.scrollTop = 0;
            scrollElem.scrollTop += 0.5;
        }
    }

    var _contentHeight = $(window).height() * 0.9;
    $("#outDiv2").height(_contentHeight - _contentHeight * 0.10 * 2 - 2);
    _InitScroll('outDiv1', 'outDiv2', $("#data_tbody").width(), 22, 1000 * 10)
</script>

<script type="text/javascript">
    let t = null;
    t = setTimeout(showTime, 1000);//開始运行
    function showTime() {
        clearTimeout(t); // 清除定时器
        dt = new Date();
        const y = dt.getFullYear();
        const mt = (dt.getMonth() + 1).toString().padStart(2, '0');
        const day = dt.getDate().toString().padStart(2, '0');
        const h = dt.getHours().toString().padStart(2, '0'); // 获取时并补零
        const m = dt.getMinutes().toString().padStart(2, '0'); // 获取分并补零
        const s = dt.getSeconds().toString().padStart(2, '0'); // 获取秒并补零
        document.getElementById("showTime").innerHTML = y + "年" + mt + "月" + day + "日" + "  " + h + "时" + m + "分" + s + "秒";
        t = setTimeout(showTime, 1000); // 设定定时器，循环运行
    }

</script>

<script type="text/javascript">
    window.productFlag = true;
    $(document).ready(function () {
        const vw = $(window).width();
        $("html").css({fontSize: vw / 20})
        $(window).resize(function () {
            const vw = $(window).width();
            $("html").css({fontSize: vw / 20})
        });
    });
    window.onload = function () {
        if (window.productFlag) {
            // 调用数据接口
            getData()
            // setInterval(getData, 5000);
        }
    }


    function getData() {
        $.ajax({
            url: '/erupt-api/watchBoard/productivity',
            type: 'get',
            headers: {
                'Authorization': 'Bearer <token>'
            },
            dataType: 'json',
            success: (res) => {
                let todayProductionQuantity = res.todayProductionQuantity;
                let tomonthProductionQuantity = res.tomonthProductionQuantity;
                let workOrderFinishedRate = res.workOrderFinishedRate;
                let unFinishQuantity = res.unFinishQuantity;
                let records = res.records;
                // 清空示例数据
                const data1 = $('#todayProductionQuantity')
                const data2 = $('#tomonthProductionQuantity')
                const data3 = $('#workOrderFinishedRate')
                const data4 = $('#unFinishQuantity')
                const productList = $('#productList')

                data1.empty();
                data2.empty();
                data3.text('');
                data4.empty();
                for (let i of todayProductionQuantity) {
                    data1.append(`<span>${i}</span>`);
                }
                for (let i of tomonthProductionQuantity) {
                    data2.append(`<span>${i}</span>`);
                }

                data3.text(workOrderFinishedRate + '%')

                for (let i of unFinishQuantity) {
                    data4.append(`<span>${i}</span>`);
                }

                productList.empty();
                let items = '';
                for (const record of records) {
                    let item = '<li>';
                    for (let key in record) {
                        record[key] = !record[key] ? '' : record[key];
                        if (key === 'finishedRate') {
                            item += `<span>${record[key]}%&nbsp;
                                <progress value="${record[key]}" max="100"></progress>
										</span>`
                            break;
                        }
                        item += `<span>${record[key]}</span>`;
                    }
                    item += '</li>';
                    items += item;
                }
                productList.append(items);
            },
            error: function (xhr, errorText, errorType) {
                // alert(errorText +",errorType="+errorType);
                //has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

            }
        });

        setTimeout(getData, 1000 * 60);
    }


    // function getOrderApi() {
    //     //alert (" getProductApi-sorderCodeTxt= "+window.orderCodeTxt);
    //     $.ajax({
    //         type: "post",
    //         url: window.baseurl + "/digitization/plan/loadOrder",
    //         data: JSON.stringify({"orderCode": window.orderCodeTxt}),
    //         contentType: "application/json",
    //         dataType: "json",
    //         async: true,
    //         success: function (res) {
    //             //alert( JSON.stringify(res.msg));
    //
    //             if (res.data.spOrder.orderCode) {
    //
    //                 document.getElementById("planQty").innerHTML = res.data.spOrder.planQty;
    //                 document.getElementById("orderFinishRate").innerHTML = res.data.spOrder.finishRate + "%"; ////!!!
    //                 document.getElementById("badQty").innerHTML = res.data.spOrder.badQty;
    //                 document.getElementById("makedQty").innerHTML = res.data.spOrder.makedQty;
    //
    //
    //                 document.getElementById("planQtyDaily").innerHTML = res.data.spDailyPlan.planQty;
    //                 document.getElementById("makedQtyDaily").innerHTML = res.data.spDailyPlan.makedQty;
    //                 document.getElementById("badQtyDaily").innerHTML = res.data.spDailyPlan.badQty;
    //                 document.getElementById("passRateDaily").innerHTML = res.data.spDailyPlan.passRate + "%";
    //
    //                 document.getElementById("dailyFinishRate").innerHTML = res.data.spDailyPlan.finishRate + "%";
    //                 document.getElementById("dailyFinishRateExcept").innerHTML = res.data.spDailyPlan.expectFinishRate + "%";///???
    //                 document.getElementById("realPieceTime").innerHTML = res.data.spDailyPlan.realPieceTime + "秒";
    //                 document.getElementById("realPieceTimeStandard").innerHTML = res.data.spDailyPlan.pieceTime + "秒";
    //
    //                 //刷新饼图数据
    //                 var chart = echarts.getInstanceByDom(document.getElementById('pieMaked'));
    //                 var option = chart.getOption();
    //
    //                 var listDat = [{name: '已生产', value: res.data.spOrder.finishRate}, {
    //                     name: '待生产',
    //                     value: 100 - res.data.spOrder.finishRate
    //                 }];
    //
    //                 //option.series[0].data = [{name: '已生产',value: data.data},{name: '待生产',value: 60-data.data}];;
    //                 option.series[0].data = listDat;
    //
    //                 chart.setOption(option);
    //
    //                 ///////////////////////pieMakedDaily////////////////
    //                 chart = echarts.getInstanceByDom(document.getElementById('pieMakedDaily'));
    //                 option = chart.getOption();
    //
    //                 listDat = [{name: '已生产', value: res.data.spDailyPlan.finishRate}, {
    //                     name: '待生产',
    //                     value: 100 - res.data.spDailyPlan.finishRate
    //                 }];
    //
    //                 //option.series[0].data = [{name: '已生产',value: data.data},{name: '待生产',value: 60-data.data}];;
    //                 option.series[0].data = listDat;
    //
    //                 chart.setOption(option);
    //
    //                 //flushEffective(res.data.spDailyPlan.realPieceTime);
    //                 flushEffective(res.data.spDailyPlan);
    //
    //
    //             }
    //
    //         },
    //         error: function (err) {
    //             // // alert( JSON.stringify(err));
    //         }
    //     });
    //
    //
    // }

    //控制全屏
    function enterfullscreen() { //进入全屏
        window.resizeTo(800, 800);
        $("#fullscreen").html("退出全屏");
        const docElm = document.documentElement;
        //Chrome等
        if (docElm.webkitRequestFullScreen) {
            docElm.webkitRequestFullScreen();
            //alert("Chrome等");
        }
        //W3C
        else if (docElm.requestFullscreen) {
            docElm.requestFullscreen();
            //alert("w3c");
        }
        //FireFox
        else if (docElm.mozRequestFullScreen) {
            docElm.mozRequestFullScreen();
            //alert("FireFox");
        }
        //IE11
        else if (elem.msRequestFullscreen) {
            elem.msRequestFullscreen();
            //alert("IE11");
        } else {
            //alert("other");
        }
    }

    function exitfullscreen() { //退出全屏
        $("#fullscreen").html("切换全屏");
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }
    }

    let a = 0;
    $('#fullscreen').on('click', function () {
        a++;
        a % 2 === 1 ? enterfullscreen() : exitfullscreen();
    })
</script>
</body>
</html>